<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <!-- 搜索板块 -->
    <a-row class="row-item-search" style="display: flex;align-items: center;">
      <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
        <a-form-item label="公司名称">
          <a-input v-decorator="['goodsName']" placeholder="请输入公司名称" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input v-decorator="['goodsCard']" placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item label="审核状态">
          <a-tree-select :treeData="categoryListTree" placeholder="请选择审核状态"  :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }"
            allowClear v-decorator="['status']"></a-tree-select>
        </a-form-item>
        <a-form-item class="search-btn">
          <a-button type="primary" icon="search" html-type="submit">搜索</a-button>
        </a-form-item>
      </a-form>
    </a-row>
    <!-- <div class="table-operator">
      <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
    </div> -->
    <!-- store_user_id -->
    <a-table rowKey="store_user_id" :columns="columns" :dataSource="categoryList"
      :expandIconColumnIndex="1" :pagination="false" :loading="isLoading">
      <!-- 自动展开隐藏 -->
      <!-- :defaultExpandAllRows="true" -->
      <!-- 研学图片 -->
      <span slot="image.external_url" slot-scope="text">
        <a title="点击查看原图" :href="text" target="_blank">
          <img width="50" height="50" :src="text" alt="商品图片" />
        </a>
      </span>

      <!-- 状态 -->
      <span slot="certification_status" slot-scope="text">
        <a-tag v-if="text == ''">全部</a-tag>
        <a-tag v-if="text == 1">审核中</a-tag>
        <a-tag v-if="text == 2" :color="'red'">被驳回</a-tag>
        <a-tag v-if="text == 3" :color="'green'">审核成功</a-tag>
      </span>
      <span slot="action" slot-scope="text, item">
        <!-- <a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
        <a v-action:delete @click="handleDelete(item)">删除</a> -->
        <a v-action:status @click="handleDet(item)">审核</a>
      </span>
    </a-table>
    <!-- <AddListForm ref="AddListForm" :categoryList="categoryList" @handleSubmit="handleRefresh" />
    <EditListForm ref="EditListForm" :categoryList="categoryList" @handleSubmit="handleRefresh" /> -->
    <DetailForm ref="DetailForm" :categoryList="categoryList" @handleSubmit="handleRefresh" />
  </a-card>
</template>

<script>
import * as Api from '@/api/auditing'
// import { STable } from '@/components'
// import AddListForm from './modules/AddListForm'
// import EditListForm from './modules/EditListForm'
import DetailForm from './modules/DetailForm'

export default {
  name: 'Index',
  components: {
    // STable,
    // AddListForm,
    // EditListForm,
    DetailForm
  },
  data() {
    return {
      // 研学列表
      categoryList: [],
      // 查询参数
      queryParam: {},
      // 正在加载
      isLoading: false,
      // 表头
      columns: [
        {
          title: '资质ID',
          dataIndex: 'certification_id'
        },
        {
          title: '用户id',
          dataIndex: 'store_user_id',
          scopedSlots: { customRender: 'store_user_id' }
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          scopedSlots: { customRender: 'mobile' }
        },
        // {
        //   title: '补充说明',
        //   dataIndex: 'supplement',
        //   scopedSlots: { customRender: 'supplement' },
        //   align: "left",
        //   key: 'introduction',
        //   customRender: (text, record) => <a-tooltip placement="topLeft" title={record.introduction}><span class="col-sql" title={text}>{text}</span></a-tooltip>
        // },
        {
          title: '状态',
          dataIndex: 'certification_status',
          scopedSlots: { customRender: 'certification_status' }
        },
        // {
        //   title: '状态',
        //   dataIndex: 'status',
        //   scopedSlots: { customRender: 'status' }
        // },
        // {
        //   title: '排序',
        //   dataIndex: 'sort'
        // },
        {
          title: '添加时间',
          dataIndex: 'create_time'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      categoryListTree: [{
        title: '全部',
        value: ''
      }, {
        title: '审核中',
        value: 1
      }, {
        title: '审核驳回',
        value: 2
      }, {
        title: '审核成功',
        value: 3
      }],
      //研学搜索栏默认值
      dGoodsName: '',
      // 当前表单元素
      searchForm: this.$form.createForm(this),
      name: '',
      card: '',
      status:'',
      categoryId: '1'
    }
  },
  created() {
    // 获取列表
    this.getCategoryList(true)
  },
  methods: {

    // 获取列表
    getCategoryList(bool) {
      bool && (this.isLoading = true)
      Api.list({ mobile: this.card,status: this.status })
        .then(result => {
          this.categoryList = result.data.list.data
        })
        .finally(() => this.isLoading = false)
    },

    // 新增记录
    handleAdd() {
      this.$refs.AddListForm.add()
    },

    // 编辑记录
    handleEdit(item) {
      this.$refs.EditListForm.edit(item)
    },

    // 查看详情
    handleDet(item) {
      this.isLoading = true
      Api.detail({ storeUserId: item.store_user_id })
        .then(result => {
          this.$refs.DetailForm.info(result.data.detail)
        })
        .finally(() => this.isLoading = false)
    },

    // 删除记录
    // handleDelete(item) {
    //   const self = this
    //   const modal = this.$confirm({
    //     title: '您确定要删除该研学吗?',
    //     content: '删除后不可恢复',
    // okText: '确定',
        // cancelText: '取消',
    //     onOk() {
    //       return Api.deleted({ sportsId: item['sports_id'] })
    //         .then(result => {
    //           self.$message.success(result.message, 1.5)
    //           self.handleRefresh()
    //         })
    //         .finally(result => modal.destroy())
    //     }
    //   })
    // },

    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh() {
      // 获取列表
      this.getCategoryList()
    },
    // 确认搜索
    handleSearch(e) {
      e.preventDefault()
      this.searchForm.validateFields((error, values) => {
        this.name = values.goodsName
        this.card = values.goodsCard
        this.status = values.status
        if (!error) {
          this.getCategoryList(true)
        }
      })
    },
  }
}
</script>
<style scoped>
.col-sql {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 200px !important;
}
</style>